<template>
  <div id="footer">
      <ul>
          <router-link tag="li" to="/movie">
              <i class="fa fa-film"></i>
              <p>电影</p>
          </router-link>
          <router-link tag="li" to="/cinema">
              <i class="fa fa-square"></i>
              <p>影院</p>
          </router-link>
          <router-link tag="li" to="/mine">
              <i class="fa fa-film"></i>
              <p>我的</p>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
    name:'TabBar'
}
</script>

<style scoped>
#footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    background: white;
    border-top: 2px solid #ccc;
}
li{
    display: inline-block;
    width: 33.3%;
    text-align: center;
}
.router-link-active{
    color: #e54847;
}
</style>